<template>
  <el-row>
    <el-col :span="3">
      <left-nav-menu :length="4" @select="leftMenuSelect">
        <span slot="0"><i class="icon-alarm-note" />数据预警</span>
        <span slot="1"><i class="icon-warn-note" />设备预警</span>
        <span slot="2"><i class="icon-calendar" />数据预警日志</span>
        <span slot="3"><i class="icon-calendar" />设备预警日志</span>
      </left-nav-menu>
    </el-col>
    <el-col :span="21">
      <data-warning
        v-if="leftNavMenuIndex === '0' && dataSource"
        :tailingPondIds="tailingPondId"
      ></data-warning>
      <equipment-warning
        v-if="leftNavMenuIndex === '1' && dataSource"
        :tailingPondIds="tailingPondId"
      ></equipment-warning>
      <data-warning-log
        v-if="leftNavMenuIndex === '2' && dataSource"
        :tailingPondIds="tailingPondId"
      ></data-warning-log>
      <equipment-warning-log
        v-if="leftNavMenuIndex === '3' && dataSource"
        :tailingPondIds="tailingPondId"
      ></equipment-warning-log>
    </el-col>
  </el-row>
</template>

<script>
import LeftNavMenu from "~/components/LeftNavMenu";
import DataWarning from "~/views/warning-management/DataWarning";
import DataWarningLog from "~/views/warning-management/DataWarningLog";
import EquipmentWarning from "~/views/warning-management/EquipmentWarning";
import EquipmentWarningLog from "~/views/warning-management/EquipmentWarningLog";
import axios from "axios";
import { getTailingPondList } from "../api/api";
export default {
  name: "WarningManagement",
  components: {
    LeftNavMenu,
    DataWarning,
    DataWarningLog,
    EquipmentWarning,
    EquipmentWarningLog,
  },
  data() {
    return {
      leftNavMenuIndex: "0",
      tailingList: [],
      tailingPondId: null,
      dataSource: false,
    };
  },
  methods: {
    leftMenuSelect(index) {
      this.leftNavMenuIndex = index;
    },
    async getTailingList() {
      const res = await getTailingPondList({
        unitId: sessionStorage.getItem("unitId"),
      });
      console.log(res);
      if (res.resultCode == "200") {
        this.tailingList = res.parameter;
        this.tailingPondId = this.tailingList[0].id; //默认选中
        if (this.tailingPondId !== null) this.dataSource = true;
      }
    },
    changeSelsct(val) {
      console.log(val);
      this.tailingPondId = val; //默认选中
    },
  },
  created() {
    this.getTailingList();
  },
};
</script>

<style scoped>
span {
  font-size: 1.4em;
}
i {
  margin-right: 12px;
  color: black;
}
.el-select {
  width: 12vw;
  margin-top: 5px;
}
</style>
